
<template>
  <!-- 选项卡，拖动多个mui-slider要研究下 -->
	<div style="background:#fff;">
		<div  id="segmentedControl" class=" mui-segmented-control mui-segmented-control-inverted">
			<a  @tap="handleTab(0)" :class="itme1Active ? 'mui-control-item mui-active' : 'mui-control-item'">
				<span :class="itme1Active ? 'font-active' : ''">品牌</span>
			</a>
			<a  @tap="handleTab(1)" :class="itme2Active ? 'mui-control-item mui-active' : 'mui-control-item'">
				<span :class="itme2Active ? 'font-active' : ''">价格</span>
			</a>
			<a  @tap="handleTab(2)" :class="itme3Active ? 'mui-control-item mui-active' : 'mui-control-item'">
				<span :class="itme3Active ? 'font-active' : ''">车型</span>
			</a>
		</div>
		<!-- swiper 这里竟然组件化后只能用 click,useCapture，我曹-->
		<div class="swiper-container swiper-contain">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<div id="item1" class="mui-control-content mui-active">
						<div id="scroll">
							<div>
								<dl class="c-brand clearfix">
									<dd v-for=" brand in brands">
										<span @click.prevent="sendBrand(brand)">
											<img :src="$store.state.appData.imgUrl+brand.pic">
											<span>{{brand.cName}}</span>
										</span>
									</dd>
									<dd class="more" @tap.prevent="goTo">
										<a href="javascript:;" id="J_indexMoreBrand">
											<img src="static/img/dian.png">
											<span>更多品牌</span>
										</a>
									</dd>
								</dl>
							</div>
							<div class="mui-scrollbar mui-scrollbar-vertical">
								<div class="mui-scrollbar-indicator" style="transition-duration: 0ms; display: block; height: 25px; transform: translate3d(0px, 0px, 0px) translateZ(0px);"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
						<dl class="c-price clearfix">
							<dd v-for="price in $store.state.appCarlist.priceList">
								<a @click.prevent="sendPrice(price)">{{price.name}}</a>
							</dd>
						</dl>
				</div>
				<div class="swiper-slide">
						<dl class="c-style clearfix">
							<dd v-for="carType in $store.state.appCarlist.carTypes">
								<a @click.prevent="sendCarTypes(carType)">{{carType.name}}</a>
							</dd>
              <!-- <dd>
                <a @click.prevent="sendCarTypes('新能源')">新能源</a>
              </dd> -->
						</dl>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Swiper from 'static/js/swiper'
export default {
    data() {
      return {
        brands: [{
            id: 81,
            cName: '一汽丰田',
            pic: "/upload/brand/9d3da27322384e6aad76d4cd747187cf.png"
          },
          {
            id: 98,
            cName: '广汽本田',
            pic: "/upload/brand/b60b369beac64aae89a9d68172da16bf.png"
          },
          {
            id: 95,
            cName: '宝马',
            pic: "/upload/brand/e95a5a9eab9e47f6933d315abe3e4dbe.png"
          },
          {
            id: 92,
            cName: '北京奔驰',
            pic: "/upload/brand/e3409695d8164516a2965917d94811d4.png"
          },
          {
            id: 82,
            cName: '一汽大众',
            pic: "/upload/brand/41597d54f78c443083a7bde59558bf82.png"
          },
          {
            id: 49,
            cName: '比亚迪',
            pic: "/upload/brand/3746111013d544eb9e4e163befb4684d.png"
          },
          {
            id: 107,
            cName: '长安福特',
            pic: "/upload/brand/bd4f271ec3354cb1bc8507cb0bcca5b1.png"
          }
        ],
        search_fixe: false,
        animated: false,
        slideInDown: false,
        nav_show: true,
        city: "深圳",
        srollHeight:0,
        segmented: 0,
        itme1Active: true,
        itme2Active: false,
        itme3Active: false
      }
    },
    created() {
      this.$store.dispatch('handlerGetCarTypes');
      this.$store.dispatch('handlerGetCarSource');
    },
    mounted() {
			var that = this
      //全局mySwiper
      window.mySwiper = new Swiper ('.swiper-contain', {
        autoplay: false,//可选选项，自动滑动
        
        on: {
        slideChangeTransitionEnd: function(){
          if(this.activeIndex == 0) {
            that.itme1Active = true
            that.itme2Active = false
            that.itme3Active = false
          }
          else if(this.activeIndex == 1) {
            that.itme1Active = false
            that.itme2Active = true
            that.itme3Active = false
          }
          else if(this.activeIndex == 2) {
            that.itme1Active = false
            that.itme2Active = false
            that.itme3Active = true
          }
        }}
      })        
    },
    //注意销毁掉监听，不然报错
    destroyed () {
      //考虑到其他页面的兼容性问题，这里销毁swiper
      window.mySwiper = null
    },
    methods: {
      handleTab(index) {
        if(index ==0){
          this.itme1Active = true
          this.itme2Active = false
          this.itme3Active = false
          mySwiper.slideTo(index, 500, false);//切换到第一个slide，速度为1秒
        }
        else if(index == 1) {
          this.itme1Active = false
          this.itme2Active = true
          this.itme3Active = false
          mySwiper.slideTo(index, 500, false);//切换到第一个slide，速度为1秒
        }
        else if(index == 2) {
          this.itme1Active = false
          this.itme2Active = false
          this.itme3Active = true
          mySwiper.slideTo(index, 500, false);//切换到第一个slide，速度为1秒
        }
      },
      handleRouteSearch() {
        this.$router.push({
          path: "/search",
        })
      },
      sendPrice(price) {
        //传输价格给filter页面,path会导致不能传参
        this.$router.push({
          name: "filter",
          params: {
            price: price,
          }
        })
      },
      sendBrand(brand) {
        this.$router.push({
          name: "filter",
          params: {
            brand: brand,
          }
        })
      },
      sendCarTypes(carType) {
        if(carType == '新能源'){
          var carType =  {"name":"新能源"}
          this.$router.push({
            name: "filter",
            params: {
              carType: carType,
              isNewEnergy: 1
            }
          })
        } else{
          this.$router.push({
            name: "filter",
            params: {
              carType: carType,
            }
          })
        }
      },
      goTo() {
        //这边如果是/brand则无过渡，/brand/则有过渡效果，参考router/index.js
        this.$router.push({
          path: "/brand/"
        });
      }
    }
  }
</script>
<style scoped>
/* 选项卡 */
  .c-brand,
  .c-price,
  .c-style {
    /*background-color: #fff;
    height: 148px;*/
  }
  .clearfix:after {
    content: ".";
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
  }

  dl {
    padding: 0 3% .5rem;
  }
  .c-brand dd {
    width: 25%;
    float: left;
    text-align: center;
    font-size: .6rem;
    height:0;
    padding-bottom:25%;
  }

  dd {
    display: block;
  }
  .c-brand dd a {
    width: 100%;
    display: inline-block;
  }
  .c-brand dd img {
    padding:10%;
    width: 90%;
    height: 90%;
  }

  img {
    border: 0 none;
    vertical-align: top;
  }

  .c-brand dd span {
    display: block;
    text-align: center;
  }

  .c-brand dd span.dot {
    font-size: 28px;
    padding:10%;
    width: 100%;
    height: 147%!important;
    line-height: 147%!important;
  }

  .c-price {
    padding-top: .2rem !important;
    font-size: .6rem;
    padding: 0 3% .5rem;
  }

  .c-price dd,
  .c-style dd {
    padding-top:.2rem;
    float: left;
    width: 33.3333%;
  }

  .c-price dd a,
  .c-style dd a {
    display: block;
    margin: .3rem;
    line-height: 1.4rem;
    text-align: center;
    border: 1px solid #ddd;
  }

	#segmentedControl {
    background-color: #fff;
  }

  

  .mui-control-item {
    background-color: #fff;
    border-bottom: 1px solid #ddd!important;
  }
	/*swiper*/
  .swiper-slide{
    height:10px
  }   

  .swiper-slide-active { 
    height:auto;
  }
  /* 字体选中样式 */
  .font-active{
    color:#ff6a27!important;
  }
</style>
